@extends('layouts.seller')

@section('title', '店铺认证')

@section('content')
    <ul class="breadcrumb">
        <li class="breadcrumb-item">卖家中心</li>
        <li class="breadcrumb-item">我的店铺</li>
        <li class="breadcrumb-item active">店铺认证</li>
    </ul>
    <div class="content-div shop-auth" id="app">
        <form method="post" id="Form">
            {{form_verify_field()}}
            <div class="form-group">
                <div class="lable-name">店主姓名:</div>
                <div class="label-input">
                    <input type="text" class="form-control w300" maxlength="40" placeholder="请输入你的姓名" v-model="auth.shop_owner">
                </div>
            </div>

            <div class="form-group">
                <div class="lable-name">身份证号:</div>
                <div class="label-input">
                    <input type="text" class="form-control w300" maxlength="18" placeholder="请输入身份证号" v-model="auth.id_card_no">
                </div>
            </div>

            <div class="form-group">
                <div class="lable-name">身份证照正面:</div>
                <div class="label-input">
                    <div class="pic-item">
                        <div class="pic-demo">
                            <img src="{{asset('images/common/id_1.png')}}">
                            <span class="t">示例</span>
                        </div>
                        <div class="pic-uploader" v-on:click="pickImage(1)">
                            <div class="t">点击上传</div>
                            <div class="preview bg-cover" :style="{'background-image':'url('+auth.id_card_pic_1+')'}"></div>
                        </div>
                        <div class="pic-tips">一张清晰的身份证正面照片<br>支持JPG/JPEG/PNG格式图片，文件大小不超过5MB</div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="lable-name">身份证照背面:</div>
                <div class="label-input">
                    <div class="pic-item">
                        <div class="pic-demo">
                            <img src="{{asset('images/common/id_2.png')}}">
                            <span class="t">示例</span>
                        </div>
                        <div class="pic-uploader" v-on:click="pickImage(2)">
                            <div class="t">点击上传</div>
                            <div class="preview bg-cover" :style="{'background-image':'url('+auth.id_card_pic_2+')'}"></div>
                        </div>
                        <div class="pic-tips">一张清晰的身份证背面照片<br>支持JPG/JPEG/PNG格式图片，文件大小不超过5MB</div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="lable-name">手持身份证照:</div>
                <div class="label-input">
                    <div class="pic-item">
                        <div class="pic-demo">
                            <img src="{{asset('images/common/id_3.png')}}">
                            <span class="t">示例</span>
                        </div>
                        <div class="pic-uploader" v-on:click="pickImage(3)">
                            <div class="t">点击上传</div>
                            <div class="preview bg-cover" :style="{'background-image':'url('+auth.id_card_pic_3+')'}"></div>
                        </div>
                        <div class="pic-tips">一张清晰的手持身份证正面照片<br>支持JPG/JPEG/PNG格式图片，文件大小不超过5MB</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="lable-name">营业执照编号:</div>
                <div class="label-input">
                    <input type="text" class="form-control w300" maxlength="40" placeholder="营业执照编号" v-model="auth.license_no">
                </div>
            </div>
            <div class="form-group">
                <div class="lable-name">营业执照照片:</div>
                <div class="label-input">
                    <div class="pic-item">
                        <div class="pic-demo">
                            <img src="{{asset('images/common/yyzz.jpg')}}">
                            <span class="t">示例</span>
                        </div>
                        <div class="pic-uploader" v-on:click="pickImage(4)">
                            <div class="t">点击上传</div>
                            <div class="preview bg-cover" :style="{'background-image':'url('+auth.license_pic+')'}"></div>
                        </div>
                        <div class="pic-tips">一张清晰的营业执照照片<br>支持JPG/JPEG/PNG格式图片，文件大小不超过5MB</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="lable-name">其他证件照片:</div>
                <div class="label-input">
                    <div class="pic-item">
                        <div class="pic-demo">
                            <img src="{{asset('images/common/jyxkz.jpg')}}">
                            <span class="t">示例</span>
                        </div>
                        <div class="pic-uploader" v-on:click="pickImage(5)">
                            <div class="t">点击上传</div>
                            <div class="preview bg-cover" :style="{'background-image':'url('+auth.other_pic+')'}"></div>
                        </div>
                        <div class="pic-tips">其他证件照片，如食品经营许可证等<br>支持JPG/JPEG/PNG格式图片，文件大小不超过5MB</div>
                    </div>
                </div>
            </div>
            <div class="button-div">
                <input type="button" class="btn btn-lg btn-primary w200" value="提交认证" v-on:click="submit()">
            </div>
        </form>
    </div>


    <script type="text/javascript">
        var vue = new Vue({
            el:'#app',
            data:{
                auth:@json($auth),
            },
            methods:{
                pickImage:function(id){
                    var $this = this;
                    Plugins.showImagePicker(function (data) {
                        if (id == 1)
                        {
                            $this.auth.id_card_pic_1 = data.imageurl;
                        }

                        if (id == 2)
                        {
                            $this.auth.id_card_pic_2 = data.imageurl;
                        }

                        if (id == 3){
                            $this.auth.id_card_pic_3 = data.imageurl;
                        }

                        if (id == 4){
                            $this.auth.license_pic = data.imageurl;
                        }

                        if (id == 5){
                            $this.auth.other_pic = data.imageurl;
                        }
                    });
                },
                submit:function () {
                    var auth = this.auth;

                    if (!auth.shop_owner)
                    {
                        DSXUI.error('请输入店主姓名');
                        return false;
                    }

                    if (!auth.id_card_no)
                    {
                        DSXUI.error('请输入身份证号码');
                        return false;
                    }

                    if (!auth.id_card_pic_1)
                    {
                        DSXUI.error('请上传身份证正面照');
                        return false;
                    }

                    if (!auth.id_card_pic_2)
                    {
                        DSXUI.error('请上传身份证背面照');
                        return false;
                    }

                    if (!auth.id_card_pic_3)
                    {
                        DSXUI.error('请上传手持身份证照');
                        return false;
                    }

                    if (!auth.license_no)
                    {
                        DSXUI.error('请填写营业执照号码');
                        return false;
                    }

                    if (!auth.license_pic)
                    {
                        DSXUI.error('请上传营业执照照片');
                        return false;
                    }

                    $.ajax({
                        type:'POST',
                        url:'/seller/shop/auth',
                        data:{auth:auth},
                        beforeSend:DSXUI.showSpinner,
                        success:function (response) {
                            setTimeout(function () {
                                DSXUI.hideSpinner();
                                DSXUI.showToast('资料已提交，请等待管理员审核');
                            }, 500);
                        }
                    });
                }
            }
        });
    </script>
@stop
